import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_project/common/utils/image_picker_utils.dart';
import 'package:flutter_project/common/utils/screen_size_utils.dart';
import 'package:flutter_project/config/app_bar_view.dart';
import 'package:flutter_project/config/theme_color.dart';
import 'package:flutter_project/picture/series_list/my_series_list_page.dart';
import '../common/route_page/route_name.dart';
import '../config/web_page.dart';
import 'chose_category_list_page.dart';

class CreateSeriesPage extends StatefulWidget {
  const CreateSeriesPage({super.key});

  @override
  State<CreateSeriesPage> createState() => _CreateSeriesPageState();
}

class _CreateSeriesPageState extends State<CreateSeriesPage> {
  FocusNode titleFocusNode = FocusNode();
  FocusNode introduceFocusNode = FocusNode();
  ValueNotifier<bool> isChose = ValueNotifier<bool>(false);
  List<String> choseList = [];

  @override
  Widget build(BuildContext context) {
    return CommonAppWidget.navAppBar(
        title: '创建合集',
        childWidget: GestureDetector(
          onTap: () {
            cancelFocusNode();
          },
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            color: Colors.white,
            child: ListView(
              children: [
                Text(
                  '合集封面',
                  style: TextStyle(fontSize: 14, color: ThemeColor.textColor),
                ),
                const SizedBox(
                  height: 12,
                ),
                GestureDetector(
                  onTap: () {
                    ImagePickerUtils.selectPhotoFromSheet(context,
                        callBackUrl: (res) {});
                  },
                  child: Stack(
                    children: [
                      Container(
                        width: 100,
                        height: 100,
                        decoration: BoxDecoration(
                            color: ThemeColor.mainBgColor,
                            borderRadius: BorderRadius.circular(4)),
                      ),
                      SizedBox(
                        height: 90,
                        width: 100,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              '+',
                              style: TextStyle(
                                  color: ThemeColor.checkNormalColor,
                                  fontSize: 20),
                            ),
                            const SizedBox(
                              height: 5,
                            ),
                            Text(
                              '添加封面',
                              style:
                                  TextStyle(color: ThemeColor.checkNormalColor),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  height: 12,
                ),
                Row(
                  children: [
                    const Text(
                      '合集标题',
                      style: TextStyle(fontSize: 14),
                    ),
                    const SizedBox(
                      width: 13,
                    ),
                    Expanded(
                      child: Container(
                        height: 30,
                        decoration: BoxDecoration(
                            border: Border(
                                bottom: BorderSide(
                                    color: ThemeColor.lineColor, width: 0.5))),
                        child: TextField(
                          focusNode: titleFocusNode,
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: '请输入标题',
                              hintStyle: TextStyle(
                                  fontSize: 14,
                                  color: ThemeColor.checkNormalColor),
                              isCollapsed: true),
                        ),
                      ),
                    )
                  ],
                ),
                const SizedBox(
                  height: 18,
                ),
                Row(
                  children: [
                    const Text(
                      '合集分类',
                      style: TextStyle(fontSize: 14),
                    ),
                    const SizedBox(
                      width: 10,
                    ),
                    GestureDetector(
                      onTap: () {
                        showMyDialogView(context);
                      },
                      child: Container(
                        width: ScreenSizeUtils.deviceScreenWidth(context) - 110,
                        height: 35,
                        decoration: BoxDecoration(
                            border: Border(
                                bottom: BorderSide(
                                    color: ThemeColor.lineColor, width: 0.5))),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              '点击选择分类',
                              style: TextStyle(
                                  fontSize: 14,
                                  color: ThemeColor.checkNormalColor),
                            ),
                            Icon(
                              Icons.arrow_forward_ios,
                              size: 18,
                              color: ThemeColor.checkNormalColor,
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 15,
                ),
                const Text(
                  '合集介绍',
                  style: TextStyle(fontSize: 14),
                ),
                const SizedBox(
                  height: 15,
                ),
                Container(
                  height: 180,
                  decoration: BoxDecoration(
                      color: ThemeColor.mainBgColor,
                      borderRadius: BorderRadius.circular(4)),
                  padding: const EdgeInsets.all(8),
                  child: TextField(
                    focusNode: introduceFocusNode,
                    maxLength: 100,
                    maxLines: 8,
                    minLines: 6,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: '请输入合集简介(选填)',
                      hintStyle: TextStyle(
                          color: ThemeColor.checkNormalColor, fontSize: 12),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 25,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    ValueListenableBuilder(
                        valueListenable: isChose,
                        builder:
                            (BuildContext context, bool value, Widget? child) {
                          String iconStr = value == false
                              ? 'assets/images/ic_agree_uncheck.png'
                              : 'assets/images/ic_agree_check.png';
                          return GestureDetector(
                            onTap: () {
                              isChose.value = !isChose.value;
                            },
                            child: Image.asset(
                              iconStr,
                              width: 18,
                            ),
                          );
                        }),
                    const SizedBox(
                      width: 5,
                    ),
                    RichText(
                      text: TextSpan(
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                              isChose.value = !isChose.value;
                            },
                          text: '我已阅读并同意',
                          style: const TextStyle(color: Colors.black),
                          children: [
                            TextSpan(
                                recognizer: TapGestureRecognizer()
                                  ..onTap = () {
                                    RouteNames.push(const WebPage(
                                      title: '注销协议',
                                      url: 'assets/html/loginoff.html',
                                    ));
                                  },
                                text: '《知识产权承诺书》',
                                style: TextStyle(color: ThemeColor.mainColor)),
                          ]),
                    ),
                  ],
                ),
                const SizedBox(
                  height: 45,
                ),
                Container(
                  margin: const EdgeInsets.symmetric(horizontal: 35),
                  alignment: Alignment.center,
                  height: 45,
                  decoration: BoxDecoration(
                      color: const Color(0xff6f66d6),
                      gradient: LinearGradient(colors: [
                        const Color(0xFFD175FE),
                        ThemeColor.mainColor
                      ]),
                      borderRadius: BorderRadius.circular(25)),
                  child: const Text(
                    '创建合集',
                    style: TextStyle(
                        fontSize: 14,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
          ),
        ),
        rightActions: [
          TextButton(
              onPressed: () {
                RouteNames.push(const MySeriesListPage());
              },
              child: const Text(
                '合集列表',
                style: TextStyle(color: Colors.black),
              ))
        ]);
  }

//取消相应
  void cancelFocusNode() {
    if (titleFocusNode.hasFocus) {
      titleFocusNode.unfocus();
    }
    if (introduceFocusNode.hasFocus) {
      introduceFocusNode.unfocus();
    }
  }

  void showMyDialogView(BuildContext context) {
    showModalBottomSheet(
        isScrollControlled: true,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8), topRight: Radius.circular(8))),
        context: context,
        builder: (BuildContext context) {
          return const ChoseCategoryListPage();
        });
  }

  @override
  void initState() {
    super.initState();
  }
}
